<template>
	<div class="cus-overlay" :class="{ 'cus-overlay-hide': !show }" @click="close" @touchmove.prevent="preventMove">
		<div :class="['cus-overlay-wrapper', type == 2 ? 'bg' : '']" @click.stop>
			<div class="cus-overlay-message">
				<div :class="type == 1 ? 'content' : 'content-tips'">
					<p v-html="message"></p>
				</div>
			</div>
			<div v-if="type == 1" class="cus-overlay-btn">
				<div @click="fncallback(callback)">
					<div class="btn_container">
						<div class="btn_up">确定</div>
						<div class="btn_down"></div>
					</div>
				</div>
			</div>
			<div v-else class="cus-overlay-btn-tips">
				<div @click="fncallback(item.callback)" v-for="(item, i) in btns" :key="i">
					<div class="btn_container">
						<div class="btn_up">{{ item.name }}</div>
						<div class="btn_down"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue';
export default {
	name: 'customDialog',
	props: {
		// 自定义：传入的字符串
		message: {
			type: String,
			default: '',
		},
		// 自定义：传入的类型
		type: [String, Number],
		showAnimation: {
			type: Boolean,
			default: false,
		},
		// 按钮
		btns: {
			type: Array,
			default: null,
		},
		// 允许触碰遮罩层关闭
		closeOnClickOverlay: {
			type: Boolean,
			default: false,
		},
		// 移除弹窗方法
		remove: Function,
	},
	setup(props, ctx) {
		// console.log(props.type);
		const data = reactive({
			// 组件显示
			show: true,
		});
		// 回调函数
		const fncallback = (callback) => {
			callback ? callback(data) : (data.show = false);
		};
		watch(
			() => data.show,
			() => {
				if (data.show == false) {
					props.remove();
				}
			}
		);
		// 允许触碰遮罩层关闭
		const close = () => {
			props.closeOnClickOverlay ? (data.show = false) : '';
		};
		//	关闭弹窗
		const confirm = () => {
			data.show = false;
		};
		const preventMove = () => {
			return ;
		};
		return {
			...toRefs(data),
			fncallback,
			close,
			confirm,
			preventMove,
		};
	},
};
</script>

<style lang="scss" scoped="scoped">
.cus-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1001;
	&-hide {
		display: none;
		z-index: 0;
	}
	&-wrapper {
		width: 426px * 0.5 * 1.1;
		height: 459px * 0.5 * 1.1;
		position: relative;
		left: 50%;
		top: 45%;
		transform: translate3d(-50%, -50%, 0);
		animation: showScale 0.4s ease forwards;
		// background: url('~@/assets/img/dialog/bg.png') no-repeat center center;
		background-size: contain;
		opacity: 0;
	}
	.bg {
		top: 50%;
		// background: url('~@/assets/img/dialog/bg2.png') no-repeat center center;
		background-size: contain;
	}
	.bg-title {
		padding-top: 50px;
	}
	&-message {
		position: relative;
		text-align: center;
		padding-top: 140px;
		margin-bottom: 30px;
		.content {
			margin: 0 auto;
			width: 100%;
			border-radius: 8px;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			color: #d7542c;
			font-size: 13px;
			padding: 0 25px;
		}
		.content-tips {
			@extend .content;
			color: #7f280a;
		}
		img {
			position: absolute;
			top: -5px;
			left: 50%;
			transform: translateX(-50%);
			width: 159px;
			height: 40px;
		}
	}
	&-btn {
		display: flex;
		justify-content: center;
		.btn_container {
			position: relative;
			.btn_up {
				z-index: 2;
				position: relative;
				font-size: 12px;
				color: #890c0b;
				text-align: center;
				line-height: 50px * 0.5;
				background-color: #fecc47;
				width: 174px * 0.5;
				height: 52px * 0.5;
				border-radius: 14px;
				border: 1px #46160b solid;
			}
			.btn_down {
				@extend .btn_up;
				z-index: 1;
				top: -47px * 0.5;
				background-color: #d76a19;
			}
		}
	}
	&-btn-tips {
		display: flex;
		padding: 0px 30px;
		justify-content: space-around;
		div:nth-child(1) {
			.btn_container {
				position: relative;
				.btn_up {
					z-index: 2;
					position: relative;
					font-size: 12px;
					color: #eeb545;
					text-align: center;
					line-height: 50px * 0.5;
					background-color: #d7542c;
					width: 148px * 0.5;
					height: 52px * 0.5;
					border-radius: 14px;
					border: 1px #46160b solid;
				}
				.btn_down {
					@extend .btn_up;
					z-index: 1;
					top: -47px * 0.5;
					background-color: #ba2b1a;
				}
			}
		}
		div:nth-child(2) {
			.btn_container {
				position: relative;
				.btn_up {
					z-index: 2;
					position: relative;
					font-size: 12px;
					color: #890c0b;
					text-align: center;
					line-height: 50px * 0.5;
					background-color: #fecc47;
					width: 148px * 0.5;
					height: 52px * 0.5;
					border-radius: 14px;
					border: 1px #46160b solid;
				}
				.btn_down {
					@extend .btn_up;
					z-index: 1;
					top: -47px * 0.5;
					background-color: #d76a19;
				}
			}
		}
	}
}
@media only screen and (orientation: portrait) {
	@keyframes showScale {
		from {
			opacity: 0;
			transform: translate3d(-50%, -50%, 0) scale(0);
		}
		to {
			opacity: 1;
			transform: translate3d(-50%, -50%, 0) scale(1);
		}
	}
}
@media screen and (orientation: landscape) {
	.flyBrid {
		bottom: -60px !important;
	}
	@keyframes showScale {
		from {
			opacity: 0;
			transform: translate3d(-50%, -50%, 0) scale(0);
		}
		to {
			opacity: 1;
			transform: translate3d(-50%, -50%, 0) scale(0.7);
		}
	}
}
</style>
